<template>
  <Page>
    <MyTabs v-model="tabActive" :list="tabList" />
    <component :is="main" />
  </Page>
</template>

<script setup>
import { ref, computed } from 'vue';

import { Page } from '@vben/common-ui';

import MyTabs from '#/components/MyTabs/index.vue';
import Main1 from './main1.vue';
import Main2 from './main2.vue';
import Main3 from './main3.vue';


const tabActive = ref(1);
const tabList = ref([
  { name: 1, label: '广告主数据' },
  { name: 2, label: '广告数据' },
  { name: 3, label: '创意数据' },
]);

const main = computed(() => {
  switch (tabActive.value) {
    case 1:
      return Main1
    case 2:
      return Main2
    case 3:
      return Main3
    default:
      return null
  }
})
</script>


<style lang="scss" scoped></style>
